<template>
  <div v-show="show" class="mpj-toast-all fix-all" :transition="transition" v-gesture:tap.stop.prevent="onClick()">
    <div class="mpj_mask_transparent "></div>
    <div class="mpj_toast divtcvma" :style="{width: width}" :class="toastClass">
      <!-- <i class="mpj_icon_toast weui_icon_{{type}}  v-show="type !== 'text'"></i> -->
      <i class="mpj_icon_toast weui_icon_{{type}}"  v-show="type !== 'text'"></i>
      <i class=" iconfont icon-{{type}}" v-show="type !== 'text'"></i>
      <p class="mpj_toast_content" id="mpj-toast-content"><slot></slot></p>
    </div>
  </div>
</template>


<script>
import {refundOrder} from "../../vuex/actions";
export default {
  data(){
    return {
      	order: this.$parent.order,
    }
  },
  vuex:{
      actions:{
        refundOrder
      }
    },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    time: {
      type: Number,
      default: 2000
    },
    type: {
      type: String,
      default: 'success'
    },
    transition: {
      type: String,
      default: 'mpj-fade'
    },
    width: {
      type: String,
      default: '157px'
    }
  },
  computed: {
    toastClass () {
      return {
        'mpj_toast_forbidden': this.type === 'warn',
        'mpj_toast_cancel': this.type === 'cancel',
        'mpj_toast_success': this.type === 'success',
        'mpj_toast_text': this.type === 'text',
        'mpj_toast_kitchen': this.type === 'kitchen'
      }
    }
  },
  methods:{
    //actions dispatch后执行的方法 ，能不能不放在这里  todo
    onClick(){

    }
  }
  // watch: {
  //   show (val) {
  //     if (val) {
  //       clearTimeout(this.timeout)
  //       this.timeout = setTimeout(() => {
  //         this.show = false
  //       }, this.time)
  //     }
  //   }
  // }
}
</script>
<style lang='sass'>
@import '../../assets/sass/global/themes.scss';
.mpj-toast-all{

}
.mpj_mask_transparent{background: rgba(0, 0, 0, 0.3);}
.mpj_mask_transparent{
  height: 100%;
  width: 100%;
}

.mpj_toast {
  padding: 11px;
  border-radius: 5px;
}
.mpj_toast .mpj_toast_success{}
.mpj_toast.mpj_toast_success i{}
.mpj_toast_success i:before{font-size: 50px;}
.mpj_toast{text-align: center;background:white; }
.mpj_toast .mpj_icon_toast{}
.mpj_toast .mpj_toast_content{padding: 15px 0;text-align: center;width: 100%;}
.mpj_toast .mpj_toast_cancel{}
.mpj_toast.mpj_toast_cancel i:before{font-size: 50px;}
.mpj_toast .icon-kitchen{font-size: 40px;color: $font-color-primary}


</style>
